import React, { Component } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
//import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
import DecoupledEditor from '@ckeditor/ckeditor5-build-classic';
//  some error for @ckeditor/ckeditor5-build-decoupled-document

import { Button } from 'antd';


class App extends Component {
    state = {
      editor: null,
      toolbarChild: null
    }

    onInit(...props){
        console.log( 'onInit.', props )
        const [editor] = props
        // You can store the "editor" and use when it is needed.
        console.log( 'Editor is ready to use!', editor );
        this.setState({ editor })

        // for decoupled-document, but not run
        // Insert the toolbar before the editable area.
        //editor.ui.view.editable.element.parentElement.insertBefore(
        //    editor.ui.view.toolbar.element,
        //    editor.ui.view.editable.element
        //);


        // get all toolbar items available
        const toolbarItems = Array.from( editor.ui.componentFactory.names() )
        console.log( 'toolbar items available:', toolbarItems )

        // init data
        editor.setData( '<p>Some text.</p>' );
        //document to set toolbar
        //this.setState({toolbarChild: editor.ui.view.toolbar.element})
    }

    onChange(...props){
        console.log( 'onChange.', props )
        const [event, editor] = props
        const data = editor.getData();

        // set a timer, auto save
        //this.saveData(data)
        console.log( 'onChange.', event, editor, data );
    }

    onBlur(...props){
        console.log( 'Blur.', props )
        const [event, editor] = props
        const data = editor.getData();

        // set a timer, auto save
        this.saveData(data)
        console.log( 'Blur.', event, editor, data );

    }

    onFocus(...props){
        console.log( 'onFocus.', props )
        const [event, editor] = props
        const data = editor.getData();
        console.log( 'Focus.', event, editor,data  );
    }

    saveData(data){
      console.log(data)
    }


    // editor readonly
    buttonClick() {
        const { editor } = this.state
        console.log(editor)
        editor.isReadOnly = !editor.isReadOnly
    }



    render() {
//        const { editor } = this.state

        //const toolbar = [ 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo', ]
        //const toolbar = [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ]

        /*

        const heading = {
            options: [
                // title 不起作用?
                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
            ]
        }
        */


        return (
            <div className="App">
                <h2>Using CKEditor 5 build in React</h2>
                <Button onClick={()=>this.buttonClick()}>click</Button>

                <CKEditor
                    editor={ DecoupledEditor }
                    config={ {
                      //plugins: [ Essentials, Paragraph, Bold, Italic, Heading ],
                      //removePlugins: [ 'Heading', 'Link' ],
                      //toolbar: toolbar,
                      //heading: heading,

                    } }

                    data="<p>Hello from CKEditor 5!</p>"
                    onInit={(...props)=>this.onInit(...props)}
                    onChange={(...props)=>this.onChange(...props)}
                    onBlur={(...props)=>this.onBlur(...props)}
                    onFocus={(...props)=>this.onFocus(...props)}
                    disabled={false}
                />
            </div>
        );
    }
}

export default App;
